<template>
  <div class="box-full box-border px-24 flex-col">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item hide-label>
        <a-input v-model="listParams.name" placeholder="输入商品库名称检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-input
          v-model="listParams.goodsLibraryId"
          placeholder="输入商品库ID检索"
          @press-enter="changeCurrent(1)"
        ></a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-select
          v-model="listParams.platformId"
          class="w-45n"
          placeholder="选择平台类型检索"
          @change="changeCurrent(1)"
        >
          <a-option
            v-for="item in platforms.slice(1)"
            :key="item.platformId"
            :value="item.platformId"
            :label="item.label"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item hide-label>
        <a-select v-model="listParams.type" class="w-45n" placeholder="选择选品库类型检索" @change="changeCurrent(1)">
          <a-option :value="1" label="自选"></a-option>
          <a-option :value="2" label="api"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>搜索</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="w-full box-border flex-1 overflow-hidden">
      <a-scrollbar style="height: 100%; overflow-y: auto; padding: 10px 50px 20px 10px">
        <div class="pb-3n box-border">
          <a-grid :cols="{ sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 }" :colGap="18" :rowGap="18">
            <a-grid-item v-for="item in tableData" :key="item.goodsLibraryId">
              <a-card
                class="item box-full box-border m-relative round-20"
                :class="item.goodsLibraryId == checkedValue ? 'checked' : ''"
                hoverable
              >
                <div class="text333">
                  <div class="flex flex-a-c mb-10">
                    <a-tag color="#f53f3f">{{ formatObject(platformList, 'value', item.platformId, 'label') }}</a-tag>
                    <span class="ml-4 font-bold tex-size-18">{{ item.name }}</span>
                  </div>
                  <div class="flex flex-a-c">
                    <span>类型：{{ item.type == 1 ? '自选' : 'api' }}</span>
                    <span class="ml-30">数量：{{ item.goodsCount }}</span>
                  </div>
                </div>
                <a-divider :margin="8" />
                <div class="text-size-14">创建：{{ item.createdAt }}</div>
                <div class="text-size-14">更新：{{ item.updatedAt }}</div>
                <div class="overlay round-20 overflow-hidden">
                  <div class="box-full flex-col-center">
                    <div
                      class="flex-center bgfff text333 text-size-14 w-44n h-9n round-18 cursor-pointer"
                      @click="onPreview(item)"
                    >
                      <icon-eye style="font-size: 20px" />
                      <span class="ml-4">预览</span>
                    </div>
                    <div
                      class="flex-center bg-theme textfff text-size-14 w-44n h-9n round-18 mt-8 cursor-pointer"
                      @click="onChange(item.goodsLibraryId)"
                    >
                      <span class="text-size-20" v-if="item.goodsLibraryId == checkedValue">✔</span>
                      <span class="ml-4">{{ item.goodsLibraryId != checkedValue ? '选择' : '当前选择' }}</span>
                    </div>
                  </div>
                </div>
              </a-card>
            </a-grid-item>
          </a-grid>
        </div>
      </a-scrollbar>
    </div>
    <div class="mt-10 flex flex-j-e">
      <a-pagination v-bind="pagination" />
    </div>
    <Preview ref="PreviewRef" />
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { goodsLibraryList, linkSelect } from '@/apis'
import { deleteEmpty, formatObject } from '@/utils/common'
import { platformList, platforms } from './data.js'
import Preview from './Preview.vue'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])

const loading = ref(false)
const PreviewRef = ref()
const listParams = reactive({
  page: 1,
  pageSize: 20,
  goodsLibraryId: undefined,
  name: undefined,
  platformId: undefined,
  type: undefined
})
const tableData = ref()
const checkedValue = ref()
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await goodsLibraryList(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(res.data?.pagination?.total ?? 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 3 && newValue.id) {
      checkedValue.value = [Number(newValue.id)]
      listParams.id = newValue.id
    } else {
      checkedValue.value = undefined
    }
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)
// 点击预览
const onPreview = (item) => {
  PreviewRef.value.onOpenModal(item)
}
// 点击重置
const onResetSearch = () => {
  listParams.goodsLibraryId = listParams.name = listParams.platformId = listParams.type = undefined
  changeCurrent(1)
}

// 点击选择
const onChange = async (goodsLibraryId) => {
  if (checkedValue.value == goodsLibraryId) {
    emit('handleCheck')
    return
  }
  const itemData = tableData.value.find((item) => {
    return goodsLibraryId === item.goodsLibraryId
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      id: itemData.goodsLibraryId,
      title: itemData.name
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>

<style lang="scss" scoped>
.arco-scrollbar {
  height: 100%;
}
.arco-btn-size-medium {
  padding: 0;
}
body {
  .arco-modal-container {
    position: absolute;
  }
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 设置遮罩层的颜色和透明度 */
  display: none; /* 初始时隐藏遮罩层 */
}
.item:hover .overlay {
  display: block; /* 鼠标放上去时显示遮罩层 */
}
.item {
  border-color: var(--color-primary-light-1);
  &.checked {
    border-color: rgb(var(--primary-6));
    box-shadow: 0px 0px 10px 0px rgb(var(--primary-4));
  }
}
</style>
